<template>
  <div>
    <h2>Hello</h2>
    <p>count: {{ store.count }}</p>
    <p>countDouble: {{ store.countDouble }}</p>
    <button @click="store.increment()">自增</button>
    <button @click="store.asyncIncrement()">异步的自增</button>

    <p>name: {{ yyStore.name }}</p>
    <p>age: {{ yyStore.age }}</p>
    <p>firstName: {{ yyStore.firstName }}</p>
    <button @click="yyStore.changeName('李四')">修改name</button>
    <button @click="yyStore.changeAge(20)">修改 age</button>

    <button @click="store.$reset()">重置 xxStore</button>
    <button @click="yyStore.$reset()">重置 yyStore</button>
  </div>
</template>

<script setup>
// 需要使用某个 store 的数据，就引入该 store 导出的组合式函数
import { useXxStore } from '../stores/xx'
import { useYyStore } from '../stores/yy'

// 调用组合式函数，返回的数据就是该 store 的实例对象。
const store = useXxStore()

const yyStore = useYyStore()

console.log('yyStore', yyStore)
</script>
